<template>
    <div>
        <div id="mainL1" style="width:595px;height:294px;">
        </div>
    </div>
</template>
  
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
import { RequestStatisticGetRCAndDC } from "@/api/path/index.js";

// 基于准备好的dom，初始化echarts实例
// 绘制图表
onMounted(() => {
    const dateArr = ref<any>([])    //时间
    const collectArr = ref<any>([])    //收车
    const splitArr = ref<any>([])    //拆车
    RequestStatisticGetRCAndDC().then((res: any) => {
        dateArr.value = res.resultObj[0].dates
        res.resultObj.forEach((item: any) => {
            if (item.name == '收车数') {
                collectArr.value = item.nums
            } else if (item.name == '拆车数') {
                splitArr.value = item.nums
            }
        });
        var chartDom = document.getElementById('mainL1');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
            grid: {
                left: '10%',
                right: '6%',
                bottom: '0%',
                containLabel: true,
            },
            legend: {
                data: ['收车量', '拆车量'],
                top: '12%',
                right: '6%',
                itemWidth: 10,
                itemHeight: 10,
                borderRadius: 4,
                textStyle: {
                    color: '#fff'
                }
            },
            xAxis: [
                {
                    type: 'category',
                    data: dateArr.value,
                    axisPointer: {
                        type: 'shadow'
                    },
                },
            ],
            yAxis: [{
                type: 'value',
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: ['#666666'],
                        width: 1,
                        type: 'dotted'
                    }
                }
            }],
            series: [
                {
                    name: '收车量',
                    type: 'bar',
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 1, color: 'rgba(48, 201, 201, 0)' },
                            { offset: 0, color: 'rgba(48, 201, 201, 1)' }
                        ])
                    },
                    data: collectArr.value,
                },
                {
                    name: '拆车量',
                    type: 'bar',
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 1, color: 'rgba(48, 111, 255, 0)' },
                            { offset: 0, color: 'rgba(48, 111, 255, 1)' }
                        ])
                    },
                    data: splitArr.value,
                }
            ]
        };

        option && myChart.setOption(option);
    })
})
</script>
<style lang="scss" scoped></style>